<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div span{
            color :blue
        }
        div.box>span{
            /* 只要是div中的span元素即可 不管多远  不管哪个元素 */
            /* 选择器可以混合去使用  */
            /* 后代选择器范围更大 */
            /* 也都是可以混合使用  */
            /* 可以无限套娃  */

            color:blue
        }
    </style>
    <div class="box">我是一个div
        <p>我是div中的p
            <span>
                我是p中的span
                <br>
            </span>
            
        </p>
        <span>
            我是div中的span
        </span>
    </div>
    <!-- 我的附庸的附庸不是我的附庸 并不是直接包含 -->
    <!-- 父子元素 祖先后代元素 直接间接包含 或者被包含 兄弟元素  拥有相同父元素的元素 -->
    <!-- 林林总总 -->
    <!-- 子元素选择器：选中指定父元素的子元素 -->
    <!-- 后代元素选择器  选中指定元素內的所有后代 -->
    <!-- 兄弟选择器 -->
      <!--   元素+ 选择下一个兄弟 感觉用处不是很大  必须紧紧挨着--> 
      <!-- ~ 选择下面所有兄弟元素 -->
    

</head>
<body>
    
</body>
</html>